<template>
  <div class="user-avatar-dropdown dis-flex align-center">
    <Dropdown @on-click="handleClick">
      <div class="dis-flex align-center">
        <Icon size="24" type="md-contact"/>
        <div class="dis-flex flex-wrap" style="line-height: 24px;white-space: nowrap">{{ `${username}` }} {{operate_area?`<${operate_area}>`:''  }}
        </div>
      </div>

      <DropdownMenu slot="list">

        <DropdownItem name="zh">中文</DropdownItem>
        <DropdownItem name="en">English</DropdownItem>
        <DropdownItem name="logout">{{
            $t("components.user.signOut")
          }}
        </DropdownItem>
      </DropdownMenu>
    </Dropdown>
  </div>
</template>

<script>
import "./user.less";
import { mapActions } from "vuex";

export default {
  data() {
    return {
      username: JSON.parse(localStorage.getItem("login_username")) || [],
      operate_area: JSON.parse(localStorage.getItem("operate_area")) || null,
    };
  },
  name: "User",
  props: {
    userAvatar: {
      type: String,
      default: "",
    },
    messageUnreadCount: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    ...mapActions(["handleLogOut"]),
    //  async   getLogin(){
    // await this.$http.login()
    //     },
    logout() {
      this.$http.loginOut().then((res) => {
        this.$localStore.set("token", "");
        this.$localStore.set("login_uid", "");
        this.$localStore.set("login_username", "");
        this.$router.push({
          name: "login",
        });
        // 清空权限的缓存
        this.$store.commit("SETPUBLICSIDEMENU", []);
      });
    },
    zh() {
      console.log("点击中文");
      this.$i18n.locale = "zh-cn";
      this.$store.commit("SETLOCALE", "zh-cn");
    },
    en() {
      this.$i18n.locale = "en";
      this.$store.commit("SETLOCALE", "en");
    },
    message() {
      this.$router.push({
        name: "message_page",
      });
    },
    handleClick(name) {
      switch (name) {
        case "logout":
          this.logout();
          break;
        case "message":
          this.message();
          break;
        case "zh":
          this.zh();
          break;
        case "en":
          this.en();
          break;
      }
    },
  },
};
</script>
